<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<alert-com :html='content'></alert-com>
			<!-- slot里面的内容变量只跟父元素有关 -->
			<alert-com1>
				<p>小心陈老师,{{content}}</p>
			</alert-com1>
			
		</div>
		<script type="text/javascript">
			Vue.component('alert-com',{
				props:['html'],
				template:`
					<div class="alert">
						<h1>温馨提示</h1>
						<div class="content">
							{{html}}
						</div>
					</div>
				`
			})
			Vue.component('alert-com1',{
				template:`
					<div class="alert">
						<h1>温馨提示</h1>
						<div class="content">
							<slot></slot>
						</div>
					</div>
				`,
				data:function(){
					
					return {
						abc:"abc123"
					}
				}
			})
			
			let app = new Vue({
				el:"#app",
				data:{
					content:"小心熊出没"
				}
			})
		</script>
	</body>
</html>
